/**
 * @description  : demo 示例
 * @descriptionDetail : 示例
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 16:15:51
 */
<template>
  <view>
    <mescroll-body
      :down="downOption"
      ref="mescrollRef" 
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
    >
      <view class="notice">
        本Demo的下拉刷新: 添加新数据到列表顶部
      </view>
      <view class="news-li" v-for="(news, idx) in dataList" :key="idx">
        <view>{{ news.title }}</view>
        <view class="new-content">
          {{ news.content }}
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
export default {
  mixins: [MescrollMixin,], // 使用mixin (在main.js注册全局组件)
  data() {
    return {
      downOption: {
        auto: false, // 是否在初始化后,自动执行downCallback; 默认true
        native: true, // 必须配置此项，且需在pages.json配置"enablePullDownRefresh" : true
      },
      dataList: [],
    }
  },
  methods: {
    /* 下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll();
      // 联网加载数据
      // window.setTimeout(() => {
      //   this.dataList = [];
      //   // 设置列表数据
      //   for (let k = 0; k < 10; k ++) {
      //     this.dataList.push({title: this.dataList.length + 1, content: "这是第" + this.dataList.length + 1,});
      //   }
      //   // 联网成功的回调,隐藏下拉刷新的状态
      //   this.mescroll.endSuccess(10);
      // }, 2500)
    },
    /* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      console.log("分页page对象", page);
      console.log("page.num", page.num, "page.size", page.size);
      console.log(this.dataList.length);
      if (this.dataList.length > 300) {
        console.log("无更多数据了");
        this.mescroll.endSuccess(0);
        return;
      }
      setTimeout(() => {
        for (let k = 0; k < 10; k ++) {
          this.dataList.push({title: this.dataList.length + 1, content: "这是第" + this.dataList.length + 1,});
        }
        this.mescroll.endSuccess(10);
      }, 100);

      // 联网加载数据
      // apiNewList(page.num, page.size).then(curPageData => {
      //   // 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
      //   // mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					
      //   // 方法一(推荐): 后台接口有返回列表的总页数 totalPage
      //   // this.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
					
      //   // 方法二(推荐): 后台接口有返回列表的总数据量 totalSize
      //   // this.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
					
      //   // 方法三(推荐): 您有其他方式知道是否有下一页 hasNext
      //   // this.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
					
      //   // 方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
      //   this.mescroll.endSuccess(curPageData.length);
					
      //   // 设置列表数据
      //   this.dataList = this.dataList.concat(curPageData);
      // }).catch(() => {
      //   // 联网失败, 结束加载
      //   this.mescroll.endErr();
      // })
    },
  },
}
</script>

<style>
	/*说明*/
	.notice{
		font-size: 30upx;
		padding: 40upx 0;
		border-bottom: 1upx solid #eee;
		text-align: center;
	}
	/*展示上拉加载的数据列表*/
	.news-li{
		font-size: 32upx;
		padding: 32upx;
		border-bottom: 1upx solid #eee;
	}
	.news-li .new-content{
		font-size: 28upx;
		margin-top: 10upx;
		margin-left: 20upx;
		color: #666;
	}
</style>
